<!DOCTYPE html>
<html>
<!-- 
    @author: 朱鹏浩
    @title: 消费者价格指数
 -->
<head lang="zh-CN">
    <title>消费者价格指数</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <meta charset="utf-8">

    <!-- 引入Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <!-- 引入BootStrap-table -->
    <link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
    <script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

    <!-- 引入Bootstrap-paginator -->
    <script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

    <!-- 引入Echarts -->
    <script src="../assets/libs/echarts/echarts.min.js"></script>
</head>
<body>
<div class="container">
    <div>
        <ul class="nav nav-tabs">
            <li role="presentation" id="tableTag"><a href="javascript:;" onclick="showTable()">&nbsp;<span class="glyphicon glyphicon-th-large"></span>&nbsp;</a></li>
            <li role="presentation" id="imageTag"><a href="javascript:;" onclick="showImage()">&nbsp;<span class="glyphicon glyphicon-tasks"></span>&nbsp;</a></li>
        </ul>
    </div>

    <div id="tableView">
        <div class="page-header" style="text-align: center;">
            <h3>消费者价格指数</h3>
            <br>
            <h4 style="margin-top: -20px;">Consumer Price Indices</h4>
        </div>
        <div style="text-align: right;">单位:&nbsp;%</div>
        <table id="tableData"></table>
    </div>

    <div id="imageView">
        <div class="page-header" style="text-align: center;">
            <h3>消费者价格指数柱状图</h3>
            <br>
            <h3>Consumer Price Indices</h3>
        </div>

        <div class="panel" style="margin-top:1.5em">
            <div id="main" style="width: 100%;height:400px;"></div>
        </div>
    </div>

    <div style="color: #959595; margin-top: 1.5em;">*此数据仅展现最近五年，若需全部数据请点击&nbsp;<a href="#" class="btn btn-info btn-xs">
        <span class="glyphicon glyphicon-save"></span> 下载
    </a></div>



    <!-- <div style="text-align: right;"><div id="page"></div></div> -->
</div>
</body>
<script>
    $(function () {
        $('#imageView').hide();
        $('#tableTag').attr('class', 'active');
    })

    function showTable() {
        $('#tableView').show();
        $('#imageView').hide();
        $('#tableTag').attr('class', 'active');
        $('#imageTag').removeClass('active');
    }

    function showImage() {
        $('#imageView').show();
        $('#tableView').hide();
        $('#imageTag').attr('class', 'active');
        $('#tableTag').removeClass('active');
    }

    $('#tableData').bootstrapTable({
        striped: true,
        columns: [
            {
                field: 'country',
                title: '国家'
            },
            {
                field: 'year1',
                title: '2010年'
            },
            {
                field: 'year2',
                title: '2011年'
            },
            {
                field: 'year3',
                title: '2012年'
            },
            {
                field: 'year4',
                title: '2013年'
            },
            {
                field: 'year5',
                title: '2014年'
            },
            {
                field: 'year6',
                title: '2015年'
            },
        ],
        data: [
            {
                country: "阿尔巴尼亚",
                year1:"107.6",
                year2:"100",
                year3:"111.44",
                year4:"109.35",
                year5:"105.55",
                year6:"103.45",
            },
            {
                country: "爱沙尼亚",
                year1:"105.71",
                year2:"100",
                year3:"103.85",
                year4:"104.74",
                year5:"105.8",
                year6:"103.68",
            },
            {
                country: "保加利亚",
                year1:"108.25",
                year2:"100",
                year3:"106.61",
                year4:"106.72",
                year5:"107.3",
                year6:"104.22",
            },
            {
                country: "波兰",
                year1:"108.11",
                year2:"100",
                year3:"107.37",
                year4:"107.87",
                year5:"105.76",
                year6:"102.27",
            },
            {
                country: "黑山",
                year1:"106.81",
                year2:"100",
                year3:"107.54",
                year4:"107.17",
                year5:"105.3",
                year6:"101.94",
            },
            {
                country: "捷克",
                year1:"112.15",
                year2:"100",
                year3:"111.48",
                year4:"111.99",
                year5:"109.11",
                year6:"104.98",
            },
            {
                country: "克罗地亚",
                year1:"111.7",
                year2:"100",
                year3:"111.37",
                year4:"111.45",
                year5:"109.81",
                year6:"103.92",
            },
            {
                country: "拉脱维亚",
                year1:"106.71",
                year2:"100",
                year3:"107.58",
                year4:"107.38",
                year5:"106.71",
                year6:"104.4",
            },
            {
                country: "立陶宛",
                year1:"108.47",
                year2:"100",
                year3:"107.63",
                year4:"108.59",
                year5:"107.35",
                year6:"104.13",
            },
            {
                country: "罗马尼亚",
                year1:"110.34",
                year2:"100",
                year3:"109.7",
                year4:"110.03",
                year5:"107.35",
                year6:"103.9",
            },
            {
                country: "马其顿",
                year1:"110.12",
                year2:"100",
                year3:"111.03",
                year4:"109.33",
                year5:"107.74",
                year6:"103.45",
            },
            {
                country: "塞尔维亚",
                year1:"109.08",
                year2:"100",
                year3:"108.12",
                year4:"109.2",
                year5:"107.97",
                year6:"104.26",
            },
            {
                country: "斯洛伐克",
                year1:"113.67",
                year2:"100",
                year3:"114.2",
                year4:"114.89",
                year5:"109.31",
                year6:"105.79",
            },
            {
                country: "斯洛文尼亚",
                year1:"128.46",
                year2:"100",
                year3:"132.96",
                year4:"131.14",
                year5:"119.28",
                year6:"111.14",
            },
            {
                country: "匈牙利",
                year1:"109.17",
                year2:"100",
                year3:"108.74",
                year4:"109.09",
                year5:"107.67",
                year6:"103.92",
            },

            {
                country: "波黑",
                year1:"106.29",
                year2:"100",
                year3:"105.96",
                year4:"106.51",
                year5:"104.46",
                year6:"101.81",
            },








        ]
    });

    var all = {
        "data": [
            ['107.6', '103.45', '105.8', '106.72', '107.37', '100', '112.15', '104.98', '109.81', '107.38', '107.63', '100', '110.12', '103.45', '107.97', '114.89'],
            ['100', '105.71', '103.68', '107.3', '107.87', '107.54', '100', '111.7', '103.92', '106.71', '108.59', '109.7', '100', '109.08', '104.26', '109.31'],
            ['111.44', '100', '108.25', '104.22', '105.76', '107.17', '111.48', '100', '106.71', '104.4', '107.35', '110.03', '111.03', '100', '113.67', '105.79'],
            ['109.35', '103.85', '100', '108.11', '102.27', '105.3', '111.99', '111.37', '100', '108.47', '104.13', '107.35', '109.33', '108.12', '100', '128.46'],
            ['105.55', '104.74', '106.61', '100', '106.81', '101.94', '109.11', '111.45', '107.58', '100', '110.34', '103.9', '107.74', '109.2', '114.2', '100'],
            ['103.45', '105.8', '106.72', '107.37', '100', '112.15', '104.98', '109.81', '107.38', '107.63', '100', '110.12', '103.45', '107.97', '114.89','101.81'],


        ],
        "countrys": ["阿尔巴尼亚","爱沙尼亚","波黑","保加利亚","波兰","黑山","捷克","克罗地亚","罗马尼亚","立陶宛","拉脱维亚","马其顿","塞尔维亚","斯洛伐克","斯洛文尼亚","匈牙利"],
        "years": ["2010年", "2011年", "2012年", "2013年", "2014年", "2015年"]
    };

    var option = {
        timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 2000,
            data: all.years
        },
        options: [{
            tooltip: {
                trigger: 'axis'
            },
            title:{
                subtext:'数据来源'
            },
            calculable: true,
            grid: {
                top:50,
                bottom:100
            },
            xAxis: [{
                type: 'category',
                axisLabel: {
                    interval: 0
                },
                data: all.countrys
            }],
            yAxis: [{
                type: 'value',
                name: '单位:%'
            }],
            series: [{
                name: '银行资本充足率',
                type: 'bar',
                data: all.data[0],
                markLine: {
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: 'orange'
                            },
                            barBorderColor: 'orange',
                            label: {
                                position: 'end',
                                formatter: function (params) {
                                    return "100（2015年）";
                                },
                                textStyle: {
                                    color: 'orange'
                                }
                            }
                        }
                    },
                    data: [
                        {
                            name: '100（2010）',
                            yAxis: 100
                        }
                    ]
                }
            }]
        },
            {
                series: [{
                    data: all.data[1]
                }]
            },
            {
                series: [{
                    data: all.data[2]
                }]
            },
            {
                series: [{
                    data: all.data[3]
                }]
            },
            {
                series: [{
                    data: all.data[4]
                }]
            },
            {
                series: [{
                    data: all.data[5]
                }]
            },
            {
                series: [{
                    data: all.data[6]
                }]
            },
            {
                series: [{
                    data: all.data[7]
                }]
            },
            {
                series: [{
                    data: all.data[8]
                }]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>